<template>
	<view class="container">
		<!-- 活动标题 -->
		<view class="title" style="display: flex; justify-content: space-between;">
			<text class="title-text">活动名称1</text>
			<text class="subtitle" style="color: blue">分享活动</text>
		</view>
		<view style="margin-bottom: 10px;">
			招宣年度: 2023年
		</view>
		<!-- 活动基本信息 -->
		<view class="info-section" style="background-color: #fff;">
			<view class="info-item">
				<text class="info-label">活动区域：</text>
				<text class="info-value">湖北省武汉市洪山区</text>
			</view>
			<view class="info-item">
				<text class="info-label">活动牵头宣传组：</text>
				<text class="info-value">宣传组名称</text>
			</view>
			<view class="info-item">
				<text class="info-label">活动创建人：</text>
				<text class="info-value">姓名1</text>
			</view>
			<view class="info-item">
				<text class="info-label">活动来源：</text>
				<text class="info-value">派发</text>
			</view>
		</view>

		<!-- 活动时间 -->
		<view class="time-section" style="background-color: #fff;">
			<text class="time-title">计划活动时间：</text>
			<text class="time-value">计划开始日期：2023/03/29</text>
			<text class="time-value">计划结束日期：2023/03/29</text>
			<text class="time-value">合计时长：1天</text>
		</view>

		<!-- 活动成员 -->
		<view class="member-section" style="background-color: #fff;">
			<view style="display: flex; justify-content: space-between;">
				<view class="member-title" style="font-weight: 700; flex:1"><text style="font-size: 30px;">活动成员</text>
				</view>
				<button @click="act=false"
					style="border:1px solid blue; width: 100px background-color: #fff; color: blue;">收起</button>
			</view>
			<view class="member-list">
				<view class="member-item" v-for="(member, index) in members" :key="index">
					<view class="member-name"
						style="background-color: #f2f2f2; width: 100%; margin: 10px; height: 200px;">{{ member.name }}
						<view />
						<view class="member-details">学号：{{ member.id }} </view>

						<view class="member-details"> 在校单位：{{ member.school }} </view>

						<view class="member-details"> 职务：{{ member.position }}</view>

						<view class="member-details"> 职称：{{ member.title }}</view>

						<view class="member-details"> 籍贯：{{ member.hometown }}</view>

						<view class="member-details"> 毕业中学：{{ member.graduationSchool }}, </view>

						<view class="member-details">联系电话：{{ member.phone }} </view>
					</view>

				</view>
			</view>
		</view>
	</view>


	<!-- 活动单位及联系人信息 -->
	<view class="activity-info" style="margin: 10px ; background-color: #fff;padding: 10px">
		<view class="info">
			<text style="color: #666666;">活动信息</text>
		</view>
		<view class="info-item">
			<text class="info-value">宣传到访单位名称：A单位</text>
			<text class="info-value">宣传到访时间：2023/03/29</text>
			<text class="info-value">宣传到访单位联系人：周彬</text>
			<text class="info-value">宣传到访单位联系人职务：教导主任</text>
		</view>
	</view>

	<view class="member-section" style="background-color: #fff;margin: 10px; padding: 10px;">
		<view style="display: flex; justify-content: space-between;">
			<view class="member-title" style="font-weight: 700; flex:1"><text style="color: #666666;">到访中学</text>
			</view>
			<button @click="act=false"
				style="border:1px solid blue;height: 30px;font-size: 13px;: 100px background-color: #fff; color: blue;">收起</button>
		</view>
		<view class="member-list">
			<view class="member-item" v-for="(member, index) in members" :key="index" style="background-color: #f2f2f2;margin-bottom: 10px;">
				<view class="member-name">{{ member.name }}</view>
				<view class="member-details">
					学号：{{ member.id }},

				</view>
				<view class="member-details">

					在校单位：{{ member.school }},

				</view>
				<view class="member-details">
					职务：{{ member.position }},

				</view>
				<view class="member-details">


					职称：{{ member.title }},

				</view>
				<view class="member-details">

					籍贯：{{ member.hometown }},

				</view>
				<view class="member-details">

					毕业中学：{{ member.graduationSchool }},
				</view>
				<view class="member-details">
					
					联系电话：{{ member.phone }}
				</view>
			</view>
		</view>
	</view>

	<!-- 活动时间和地点 -->
	<view class="activity-time-location" style="background-color: #fff;margin: 10px;padding:10px">
<view style="display: flex;">
	<text class="time-title" style="flex: 1;color: #c8c8c8">活动总结</text>
	<button @click="zongjie" style="height: 40px; background-color: #fff;border: 1px solid blue; color: blue">添加</button>
</view>
		<view class="time-value"  style="color: blue;padding:0px">2023年3月29日</view>
		<view style="padding: 5px;">
			总结报告总结报告总结报告总结报告总结报告总结报告
			
			总结报告总结报告总结报告总结报告总结报告总结报告
			
			总结报告总结报告总结报告总结报告总结报告总结报告
			
			总结报告总结报告总结报告总结报告总结报告总结报告
		</view>
		<view style="border-top: 1px solid #ccc;height: 50px;line-height: 50px;font-size: 30px">记录人： 周斌        </view>         
	</view>

	<!-- 活动形式和内容 -->
	<view class="activity-format" style="margin: 10px; background-color: #fff;padding: 10px">
		<view style="display: flex;">
		<text class="format-title" style="color: #c8c8c8; flex:1">活动照片：</text>
		<button @click="zhaopian" style="height: 40px; background-color: #fff;border: 1px solid blue; color: blue">添加</button>
		</view>
		<view class="photo-placeholder" style="display: flex;justify-content: center;">
			<text class="placeholder-text">照片</text>
			<!-- 红色的X标记，表示不允许直接上传（这里只是示意） -->  
			<text class="prohibited-mark">X</text>  
		</view>
		<view style="border-top: 1px solid #ccc;height: 50px;line-height: 50px;font-size: 30px">记录人： 周斌        </view>
		
	</view>

	<!-- 活动形式和内容 -->
	<view class="activity-format" style="margin: 10px; background-color: #fff;padding: 10px">
		<view style="display: flex;">
		<text class="format-title" style="color: #c8c8c8; flex:1">活动视频：</text>
		<button @click="shiping" style="height: 40px; background-color: #fff;border: 1px solid blue; color: blue">添加</button>
		</view>
		<view class="photo-placeholder" style="display: flex;justify-content: center;">
			<text class="placeholder-text">照片</text>
			<!-- 红色的X标记，表示不允许直接上传（这里只是示意） -->  
			<text class="prohibited-mark">X</text>  
		</view>
		<view style="border-top: 1px solid #ccc;height: 50px;line-height: 50px;font-size: 30px">记录人： 周斌        </view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				members: [{
						name: '姓名1',
						id: '10003',
						school: 'A学院',
						position: '主任',
						title: '教授',
						hometown: '湖北省',
						graduationSchool: '武汉一中',
						phone: '15888888888',
					},
					{
						name: '姓名2', // 注意：这里可能需要根据实际情况调整姓名和其他信息  
						id: '10003',
						school: 'A学院',
						position: '主任', // 这里可能有误，因为通常一个学院的主任不会有两个相同的姓名且职务也相同  
						title: '教授',
						hometown: '湖北省',
						graduationSchool: '武汉一中',
						phone: '15888888888', // 这里缺少姓名2的电话，需要补充  
					},
				],
				act: true,
			};
		},
		methods: {
			zongjie() {
				uni.navigateTo({
					url: "/pages/video/myActivities/zongjie"
				})
			},
			zhaopian() {
				uni.navigateTo({
					url: "/pages/video/myActivities/zhaopian"
				})
			},
			shiping() {
				uni.navigateTo({
					url: "/pages/video/myActivities/shiping"
				})
			}
		}
	};
</script>

<style>
	.container {
		padding: 15px;
		background-color: #f9f9f9;
		/* 浅灰色背景 */
		border-radius: 8px;
		/* 圆角边框 */
		/* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
		/* 阴影效果 */
	}

	page {
		background-color: #f9f9f9;
	}

	.title {
		display: flex;
		font-size: 24px;
		font-weight: bold;
		color: #333;
		/* 深灰色标题 */
		margin-bottom: 10px;
	}

	.subtitle {
		font-size: 16px;
		color: #666;
		/* 深灰色副标题 */
		margin-bottom: 20px;
	}

	.info-section,
	.time-section,
	.member-section {
		margin-bottom: 20px;
	}

	.info-item,
	.time-value,
	.member-item {
		/* display: flex; */
		/* justify-content: space-between; */
		/* 子项两端对齐 */
		/* align-items: center; */
		/* 子项垂直居中 */
		padding: 8px 0;
	}

	.info-label,
	.time-title,
	.member-title {
		font-weight: bold;
		color: #333;
		/* 深灰色标签 */
		width: 25%;
		/* 固定宽度或根据内容调整 */
		min-width: 100px;
		/* 最小宽度 */
	}



	.info-value,
	.time-value,
	.member-details {
		color: #666;
		/* 深灰色值 */
		margin-top: 5px;
	}

	.member-name {
		font-weight: bold;
		color: #333;
		/* 成员名称深灰色 */
		margin-bottom: 4px;
	}

	.member-details {
		font-size: 14px;
		/* 详细信息字体稍小 */
	}

	.activity-page {
		padding: 20px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	}
.placeholder-text {  
  font-size: 14px;  
  color: #666;  
}  
	.activity-header {
		margin-bottom: 20px;
	}

	.header-title {
		font-size: 20px;
		font-weight: bold;
	}

	.activity-info {
		margin-bottom: 20px;
	}

	.info-item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-bottom: 10px;
	}

	.info-label {
		font-weight: bold;
		width: 50%;
	}

	.info-value,
	.info-contact,
	.info-position {
		margin-left: 20px;
	}


	.time-title,
	.location-title,
	.format-title {
		font-weight: bold;
		margin-right: 10px;
		min-width: 100px;
	}

	.time-value,
	.location-value,
	.format-content {
		flex: 1;
	}

	.activity-summary {
		margin-bottom: 20px;
	}

	.summary-title {
		font-weight: bold;
		margin-right: 10px;
	}

	.summary-placeholder {
		color: #999;
	}

	.button-group {
		display: flex;
		justify-content: space-around;
	}

	.action-button,
	.detail-button {
		padding: 10px 20px;
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	.detail-button {
		background-color: #5cb85c;
		/* 详情按钮使用不同的颜色 */
	}
	.placeholder-text {
	  font-size: 14px;  
	  color: #666;  
	}  
	  
	.prohibited-mark {  
	  position: absolute;  
	  right: 5px;  
	  top: 5px;  
	  font-size: 20px;  
	  color: red;  
	}  
	
	.photo-placeholder {  
	  position: relative;  
	  width: 400px; /* 占位符的宽度，根据实际需要调整 */  
	  height: 300px; /* 占位符的高度，根据实际需要调整 */  
	  background-color: #e0e0e0; /* 占位符的背景色 */  
	  margin-bottom: 10px; /* 占位符之间的间距 */  
	  display: flex;  
	  justify-content: center;  
	  align-items: center;  
	}  
</style>